<template>
  <div class="details_view">
    <el-container class="base_details_container">
      <BackTitleView :title="`订单详情-${statusTitle}`" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title">支付明细</div>
            <div class="base_details_content_second">
              <el-table :data="data.payList" border>
                <el-table-column prop="transactionNo" label="交易号" width="" />
                <el-table-column prop="payMoney" label="金额" width="100" />
                <el-table-column prop="payTypeStr" label="支付方式" width="100" />
                <el-table-column prop="payTime" label="交易时间" width="180" />
              </el-table>

            </div>
            <div class="base_details_title">关联订单</div>
            <div class="base_details_content_second">
              <el-table :data="data.list" border>
                <el-table-column v-for="(item, index) in relationConfig" :key="index" :prop="item.prop"
                  :label="item.label" :width="item.width" />
              </el-table>
            </div>
            <div class="base_details_title">产品信息</div>
            <div class="base_details_content_second">
              <el-table :data="data.productList" border>
                <el-table-column label="产品图片" width="110" align="center">
                  <template #default="scope">
                    <img :src="scope.row.picUrl" :style="{
                      width: '75px',
                      height: '75px',
                    }" />
                  </template>
                </el-table-column>
                <el-table-column prop="productName" label="产品名称" />
                <el-table-column prop="skuName" label="规格" width="80" />
                <el-table-column prop="shopName" label="归属基地" width="140" />
                <el-table-column prop="duePrice" label="价格" width="80" />
                <el-table-column prop="num" label="数量" width="60" />
                <el-table-column prop="profitMoney" label="毛利" width="100" />
                <el-table-column prop="profitRate" label="毛利率%" width="100" />
              </el-table>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="back">关闭</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import useRoute from "@util/router";
import { ref } from "vue";
import api from "@api/finance";

const route = useRoute();
const urlQuery = route.query();

const relationConfig = [
  {
    label: "订单编号",
    prop: "orderCode",
  },
  {
    label: "发货方式",
    prop: "deliveryType",
    width: 100,
  },
  {
    label: "归属基地",
    prop: "shopName",
    width: 140,
  },
  {
    label: "下单时间",
    prop: "createTime",
  },
  {
    label: "付款时间",
    prop: "payTime",
  },
  {
    label: "活动优惠",
    prop: "discountMoney",
  },
  {
    label: "实付金额",
    prop: "dueMoney",
  },
];

const data = ref({
  list: [],
  payList: [],
  productList: []
});

const statusTitle = ref("已完成");

getData();
function getData() {
  api.details(urlQuery.code, (val) => {
    statusTitle.value = "已完成";
    val.payList.map(e => {
      switch (e.payType) {
        case "1021001":
          e.payTypeStr = "微信支付"
          break;
        case "1021002":
          e.payTypeStr = "储值支付"
          break;
      }
      e.payMoney = e.payMoney + "¥"
      return e
    })
    val.list.map((e) => {
      // 1017001 商品订单、1017002 旅行订单、1017003 酒店订单、1017004 礼包订单
      switch (e.mainBusiType) {
        case "1017001":
          e.mainBusiType = "商品";
          break;
        case "1017002":
          e.mainBusiType = "旅行";
          break;
        case "1017003":
          e.mainBusiType = "酒店";
          break;
        case "1017004":
          e.mainBusiType = "礼包";
          break;
      }
      // 1019001 快递配送、1019002 用户自提
      switch (e.deliveryType) {
        case "1019001":
          e.deliveryType = "快递配送";
          break;
        case "1019002":
          e.deliveryType = "用户自提";
          break;
      }
      return e;
    });
    data.value = val;
  });
}

function back() {
  route.go(-1);
}
</script>

<style lang="scss">
.details_view {
  height: 100%;
}
</style>
